<script lang="ts" setup>
	import {
		ref,
		reactive,
		inject,
		onMounted
	} from 'vue'
	import user from '@/api/user.js'
	import article from '@/api/article.js'
	import {
		onLoad, onTabItemTap,onShow
	} from '@dcloudio/uni-app'
	// import list from '@/components/list.nvue'
	import list2 from '@/components/list2.vue'
	const apiTry : Function = inject('$try')
	const skip = (str : string) => {
		uni.navigateTo({
			url: str,
		})
	}
	//tabs/swiper列表
	let navList = [{
		name: '推荐',
		id: 'tj'
	},
	{
		name: '关注',
		id: 'gz'
	}
	]
	//下拉刷新阈值
	let _triggered = ref(false)
	let triggered = ref(false)
	//遮罩层
	let isShow : any = ref(false)
	//
	let gather = reactive({
		articleList: [] //文章列表
	})
	//tabbar记录
	let tabbarTag = true
	//swiper/tabs当前页
	let swiperCurrent = ref<number>(0)
	//swiper切换事件
	//
	let page = 1
	let pageSize = 4
	let status = ref('loading')

	//中止触发
	const onAbort = () => {
		triggered.value = false
	}
	//刷新触发
	const onRefresh = () => {
		if (_triggered.value) return
		_triggered.value = true
		if (!triggered.value) triggered.value = true
		if (swiperCurrent.value) {
			setTimeout(()=>{
				getFollowArticleList(() => {
					triggered.value = false
					_triggered.value = false
				})
			},500)
		}else {
			setTimeout(()=>{
				getArticleList(() => {
					triggered.value = false
					_triggered.value = false
				})
			},500)
			
		}
		
		
	}
	//复位
	const onRestore = () => {
		triggered.value = false
		_triggered.value = false
	}
	//获取文章关注列表
	const getFollowArticleList = async (cb) => {
		const [err, res] = await apiTry(article.getFollowArticleList({
			likerid: uni.getStorageSync('userinfo').userid ? uni.getStorageSync('userinfo').userid : ''
		}))
		if (err) return
		status.value = 'nomore'
		gather.articleList = res.data
		cb()
	}
	const moreStatus = (val) => {
		status.value = val
	}
	//获取文章推荐列表
	const getArticleList = async (cb : Function) => {
		status.value = 'loading'
		const [err, res] = await apiTry(user.getArticleList({
			page: page,
			pageSize: pageSize,
			likerid: uni.getStorageSync('userinfo').userid ? uni.getStorageSync('userinfo').userid : ''
		}))
		if (err) return
		gather.articleList = [...gather.articleList, ...res.data]
		cb()
		if (res.total <= pageSize) {
			status.value = 'nomore'
		} else {
			moreStatus(res.data.length !== 0 ? 'loadmore' : 'nomore')
		}
		if (res.data.length === 0) return false
		page += 1 // 当前页加1
	}
	const giveLike = () => {
		getArticleList(() => { })
	}
	const listSwitch = (e) => {
		swiperCurrent.value = e.current
		page = 1
		gather.articleList = []
		switch (e.current) {
			case 0:
				getArticleList(() => { })
				break
			case 1:
				getFollowArticleList(() => { })
				break
		}
	}
	const scrolltolower = () => {
		if (!swiperCurrent.value) return getArticleList(() => { })
	}
	onTabItemTap((e)=>{
		if(tabbarTag) {
			onRefresh()
		}
		tabbarTag = true
	})
	onShow(()=>{
		tabbarTag = false
		// page = 1
		// gather.articleList = []
	})
	onMounted(()=>{
		tabbarTag = true
	})
	onLoad(() => {
		changeList()
	})
	const changeList = () => {
		switch (swiperCurrent.value) {
			case 0:
				getArticleList(() => { })
				break
			case 1:
				getFollowArticleList(() => { })
				break
		}
	}
</script>

<template>
	<view class="psb"></view>
	<view class="wap flex flex-dir-c">
		<uni-nav-bar @clickRight="isShow = true" fixed right-icon="plus-filled">
			<u-tabs class="tabs" active-color="rgb(252,186,13)" :list="navList" :is-scroll="false"
				v-model="swiperCurrent"></u-tabs>
		</uni-nav-bar>
		<list2 @scrolltolower="scrolltolower" :status="status" @listSwitch="listSwitch" @giveLike="giveLike"
			:navList="navList" :swiperCurrent="swiperCurrent" :list="gather.articleList" @onAbort="onAbort"
			@onRefresh="onRefresh" @onRestore="onRestore" :triggered="triggered" />
	</view>
	<view class="pop" v-show="isShow">
		<u-icon name="arrow-up-fill" color="rgba(33,35,30,0.8)" size="30"
			style="position: absolute;top: -20rpx;right: -10rpx;z-index: -1;"></u-icon>
		<view class="flex flex-ai-c" @click="skip(`/pages_home/writeArticle/index`)">
			<u-icon size="36rpx" name="edit-pen" color="rgb(175,177,181)"></u-icon>
			<view>写文章</view>
		</view>
		<view class="flex flex-ai-c" @click="skip('/pages_home/writeArticle/index?typeid=7')">
			<u-icon size="36rpx" name="photo" color="rgb(175,177,181)"></u-icon>
			<view>图片</view>
		</view>
		<view class="flex flex-ai-c" @click="skip('/pages_home/sendVideo/index')">
			<u-icon size="36rpx" name="skip-forward-right" color="rgb(175,177,181)"></u-icon>
			<view>视频</view>
		</view>
		<!-- #ifndef H5 -->
		<view class="flex flex-ai-c" @click="skip('/pages_home/create_live/index?palyerType=1')">
			<u-icon size="36rpx" name="play-circle" color="rgb(175,177,181)"></u-icon>
			<view>直播</view>
		</view>
		<!-- #endif -->

	</view>
	<view class="shade" v-show="isShow" @click="isShow = false"></view>
</template>

<style src="./index.scss" lang="scss" scoped></style>